(function () {
  const data = [
    {
      name1: 'HTML',
      name2: 'CSS',
      name3: 'JAVASCRIPT',
      img1: './images/about/形状 1@2x.png',
      img2: './images/about/形状 2@2x.png',
      img3: './images/about/形状 3@2x.png',
      text1: '100%',
      text2: '60%',
      text3: '80%',
      color1: 'red',
      color2: 'bule',
      color3: 'pink',
    },
    {
      name1: 'PHP',
      name2: 'CWORDPRESS/CMS',
      name3: 'PHOTOSHOP',
      img1: './images/about/形状 4@2x.png',
      img2: './images/about/形状 5@2x.png',
      img3: './images/about/形状 6@2x.png',
      text1: '80%',
      text2: '50%',
      text3: '70%',
      color1: 'cyan',
      color2: 'orange',
      color3: 'green',
    },
  ];
  const Rop = document.querySelector('.Rop');
  console.log(Rop);
  data.forEach(function (nav) {
    Rop.insertAdjacentHTML('afterbegin', `
<div class="Rop-one">
<div class="Rop-two">
  <div class="flex rop1">
    <h6>${nav.name1}</h6>
    <div class="pop-up">
      <img src="${nav.img1}" alt="">
      <p class="text">${nav.text1}</p>
    </div>
  </div>
  <div class="flex rop2">
    <div class="rop3 ${nav.color1}"></div>
  </div>
</div>
<div class="Rop-two">
  <div class="flex rop1">
    <h6>${nav.name2}</h6>
    <div class="pop-up">
      <img src="${nav.img2}" alt="">
      <p class="text">${nav.text2}</p>
    </div>
  </div>
  <div class="flex rop2">
    <div class="rop3 ${nav.color2}"></div>
  </div>
</div>
<div class="Rop-two">
  <div class="flex rop1">
    <h6>${nav.name3}</h6>
    <div class="pop-up">
      <img src="${nav.img3}" alt="">
      <p class="text">${nav.text3}</p>
    </div>
  </div>
  <div class="flex rop2">
    <div class="rop3 ${nav.color3}"></div>
  </div>
</div>
</div>
`)
  })



})();
(function () {
  const list = [
    {
      name: '项目经验',
      color1: 'bg-green',
      color2: 'bg-lightBlue ',
      time1: '2019年8月',
      time2: '2019年8月',
      school1: '奔跑吧小程序',
      school2: '大学生软件外包服务平台',
      specialty1: '',
      specialty2: 'www.qingmengtech.com',
      content1: '开发快递小程序能让用户快速找到需要的信息，并且查看自己快递信息，让更多的用户能抵扣快件费用，开发快递小程序能让用户快速找到需要的信息，并且查看自己快递信息，让更多的用户能抵扣快件费用',
      content2: '大学生软件外包服务平台大学生软件外包服务平台大学生软件外包服务平台大学生软件外包服务平台大学生软件外包服务平台大学生软件外包服务平台大学生软件外包服务平台',
    },
    {
      name: '工作经验',
      color1: 'bg-bule',
      color2: 'bg-pink ',
      time1: '2019年8月10日-至今',
      time2: '2019年8月10日-至今',
      school1: '青盟科技有限公司）',
      school2: '百度',
      specialty1: 'Web前端工程师',
      specialty2: 'Web前端工程师',
      content1: '一、与设计师、产品工程师紧密工作在一起,实现产品前端UI和交互方面的开发需求，确保不同平台、设备上具有优秀的用户体验;二、配合后端工程师增加页面的JS交互效果以及CSS排版;三、根据不同的PC和手机浏览器编写高效的脚本代码; 四、持续的优化前端体验和页面响应速度，并保证兼容性和执行效率。五、结合页面和系统功能，完成移动端页面/微信H5/小程序的开发、调试等工作，高效、高质地完成代码编写，确保符合前端代码规范;六、与后端开发团队紧密配合，完成接口对接，确保前后端有效交互;七、综合运用客户端和服务器端构建与优化方案、模块化开发等手段，提升开发效率和系统性能。',
      content2: '一、与设计师、产品工程师紧密工作在一起,实现产品前端UI和交互方面的开发需求，确保不同平台、设备上具有优秀的用户体验;二、配合后端工程师增加页面的JS交互效果以及CSS排版;三、根据不同的PC和手机浏览器编写高效的脚本代码;四、持续的优化前端体验和页面响应速度，并保证兼容性和执行效率。 五、结合页面和系统功能，完成移动端页面/微信H5/小程序的开发、调试等工作，高效、高质地完成代码编写，确保符合前端代码规范;六、与后端开发团队紧密配合，完成接口对接，确保前后端有效交互;七、综合运用客户端和服务器端构建与优化方案、模块化开发等手段，提升开发效率和系统性能。',
    },
    {
      name: '教育经历',
      color1: 'bg-orange',
      color2: 'bg-bule',
      time1: '2019年8月10日-至今',
      time2: '2014年8月10日-2019年7月10日',
      school1: '东北林业大学（硕士）',
      school2: '哈尔滨理工大学',
      specialty1: '计算机专业',
      specialty2: '计算机专业',
      content1: '硕士研究生学位课程，包括：（1）矩阵论；（2）概率论与数理统计；（3）概率论与随机过程；（4）微分方程数值解法。选修课程，包括：（1）应用泛函分析；（2）数学物理方程；（3）高等数值分析；（4）最优化理论与算法；（5）微分几何与计算几何；（6）数学建模',
      content2: '主修：电子技术、离散数学、程序设计、数据结构、操作系统、计算机组成原理、微机系统、计算机系统结构、编译原理、计算机网络、数据库系统、软件工程、人工智能、计算机图形学、数字图像处理、计算机通讯原理、多媒体信息处理技术、数字信号处理、计算机控制、网络计算、算法设计与分析、信息安全、应用密码学基础',
    },
  ];
  const pm = document.querySelector('#pm');
  console.log(pm);
  list.forEach(function (nav) {
    pm.insertAdjacentHTML('afterbegin', `
    <div class="experience">
    <h1>${nav.name}</h1>
    <div class="flex experience-education">
      <div>
        <div class="ball-one ${nav.color1}"></div>
        <div class="stick"></div>
        <div class="ball-two ${nav.color2}"></div>
      </div>
      <div class="bg">
        <div class="flex">
          <div class="${nav.color1} bg-size flex">
            <p>${nav.time1}</p>
          </div>
          <div class="experience-content">
            <div class="phd flex"><span>${nav.school1}</span><span class="${nav.color1}">${nav.specialty1}</span></div>
            <div class="phd-content">
            ${nav.content1}
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="${nav.color2} bg-size flex">
            <p>${nav.time2}</p>
          </div>
          <div class="experience-content">
            <div class="phd flex"><span>${nav.school2}</span><span  class="${nav.color2}">${nav.specialty2}</span></div>
            <div class="phd-content">
            ${nav.content2}
            </div>
          </div>
        </div>
      </div>


    </div>

  </div>
  `)
  })



})();